<template>
	<div class="home-swiper">
		<!-- v-if="list.length"用于解决轮播图在页面加载完显示的是最后一张图片的问题 -->
		<swiper 
			:options="swiperOption"
			v-if="showSwiper"
		>
		    <swiper-slide
				v-for="item of list"
				:key="item.id"
		    >
		    	<img :src="item.imgUrl" alt="轮播图片" class="img-item">
		    </swiper-slide>
		    <div class="swiper-pagination"  slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>

	export default {
		name:'homeSwiper',
		props: {
			/*限制传递数据的类型*/
			list:Array
		},
		data() {
			return {
				swiperOption: {
					pagination:".swiper-pagination",
					loop:true
				},
			}
		},
		/*模板中关于逻辑的处理都放到computed中*/
		computed: {
			showSwiper() {
				/*当list有数据并且加载完时才显示轮播图*/
				return this.list.length;
			}
		}
	};
</script>

<style lang="scss" scoped>
	/**
	 * scss中的穿透 /deep/
	 * stylus穿透 >>>
	 */
	/* 轮播插件样式的修改 */
	.home-swiper /deep/ .swiper-pagination-bullets {
		bottom: .1rem;
	}
	.home-swiper /deep/ .swiper-pagination-bullet {
		width: .12rem;
		height: .12rem;
	}
	.home-swiper /deep/ .swiper-pagination-bullet-active {
		background: rgba(255,255,255,1);
	}
	.home-swiper /deep/ .swiper-pagination-bullet {
		background: rgba(255,255,255,.5);
	}
	.home-swiper {
		/* 设置图片的宽高比，避免加载时的抖动 */
		overflow: hidden;
		height: 0;
		padding-bottom: 26.75%;
		.img-item {
			width: 100%;
		}
	}
</style>